<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/resources/css/font.css">
    <link rel="stylesheet" href="/resources/css/xadmin.css">
    <script src="/resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/resources/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<!-- @formatter:off -->
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body ">
                        <form class="layui-form layui-col-space5">
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="id" placeholder="请输入商品编号" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="name" placeholder="请输入商品名称" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block"><input type="text" name="type" placeholder="请输入商品类型" class="layui-input"></div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <select name="status">
                                    <option value="">商品状态</option>
                                    <option value="新品">新品</option>
                                    <option value="正常">正常</option>
                                    <option value="停产">停产</option>
                                </select>
                            </div>
                            <div class="layui-input-inline layui-show-xs-block">
                                <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                            </div>
                            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新"><i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                        </form>
                    </div>
                    <div class="layui-card-header">
                        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
                        <button class="layui-btn" onclick="xadmin.open('添加用户','/plan/goods-add', 800, 600)"><i class="layui-icon"></i>添加</button>
                    </div>
                    <div class="layui-card-body"><table class="layui-table layui-form" lay-filter="test" id="goodsTable"></table></div>
                </div>
            </div>
        </div>
    </div>
</body>
    <script type="text/html" id="tools">
        <button class="layui-btn layui-btn-xs layui-btn-xs" lay-event="image">查看图片</button>
        <button class="layui-btn layui-btn-xs" lay-event="edit" onclick="xadmin.open('商品编辑','/plan/goods-edit')">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
    </script>

    <!-- @formatter:on -->
    <script>
        layui.config({
            base: '', // 设定 Layui 扩展模块的所在目录，一般与 extend 方法搭配使用
            version: false, // 用于更新模块缓存，默认 false。若设为 true，即让浏览器不缓存。也可设为一个任意数值
            dir: 'layui/', // layui 基础目录，用于动态导入 src/layui.js 时的内置模块的加载。一般无需设置
            debug: false // 用于开启调试模式，默认 false。若设为 true，则模块的引入节点会保留在页面
        });

        layui.use(function () {
            let layer = layui.layer;
            let table = layui.table;
            let form = layui.form;
            let date = layui.laydate;

            table.render({
                elem: '#goodsTable',
                even: true, //隔行换色
                page: true, //开启分页
                url: '/plan/goodsDetail',
                // 将原始数据解析成 table 组件所规定的数据格式
                parseData: function (result) {
                    window.array = result;
                    return {
                        "msg": result.msg, //解析提示文本
                        "count": result.total, //解析数据长度
                        "code": result.code == 200 ? 0 : -1,
                        "data": result.data //解析数据列表
                    };
                },
                cols: [[
                    {type: 'checkbox', fixed: 'left'}, //开启多选框
                    {field: 'id', title: '商品编号', 'width': 96, sort: true, align: 'center'},
                    {field: 'name', title: '商品名称', align: 'center'},
                    {field: 'type', title: '商品类型', align: 'center'},
                    {field: 'status', title: '商品状态', align: 'center'},
                    {field: 'introduce', title: '商品介绍', align: 'center'},
                    {fixed: 'right', title: "操作", width: '18%', align: 'center', toolbar: '#tools'}
                ]]
            })

            table.on('tool(test)', function (obj) {
                //获得当前行数据
                let rowData = obj.data;

                //获得当前行 tr 的 DOM 对象
                // let tr = obj.tr;

                //获取被点击列的商品id
                // let goodsId = obj.data.id;

                //通过商品id从数组中查询商品信息
                // let goodsDetail = array.data[goodsId - 1];

                //回填值
                if (obj.event === 'image') {
                    document.getElementById("image").value = rowData.image;

                    layer.open({
                        type: 1,
                        title: "订单要求",
                        area: ['50%', '80%'],
                        btn: ['确定'],
                        content: $('#required'),
                        yes: function (index, layero) {

                        }
                    });
                } else if (obj.event === 'edit') {
                    sessionStorage.setItem('editData', JSON.stringify(rowData));
                } else if (obj.event === 'delete') {
                    let deleteArray = [obj.data];
                    layer.confirm('确定删除？', {icon: 3}, function (index) {
                        //向服务端发送删除指令
                        $.ajax({
                            url: "/plan/goodsDelete",
                            type: "post",
                            data: JSON.stringify(deleteArray),
                            //不要处理数据
                            processData: false,
                            //不要设置content-type请求头
                            contentType: "application/json",
                            success: function (res) {
                                if (res.code == 200) {
                                    //删除对应行（tr）的DOM结构，并更新缓存
                                    obj.del();
                                    layer.close(index);
                                    layer.msg("删除成功");
                                } else {
                                    layer.msg(res.msg);
                                }
                            }
                        })
                    });
                }
            })

            form.on('submit(search)', function (data) {
                let field = data.field; // 获得表单字段

                // 执行搜索重载
                table.reload('goodsTable', {
                    url: "/plan/goodsDetail",
                    // 搜索的字段
                    where: field
                });
                // 阻止默认 form 跳转
                return false;
            });

            //执行一个date实例
            date.render({
                elem: '#start' //指定元素
            });

            //执行一个date实例
            date.render({
                elem: '#end' //指定元素
            });

            //重新渲染表格方法
            window.reload = function () {
                // 重新渲染表格
                table.reloadData('goodsTable', {
                    // 设定重载数据或切换分页时的滚动条的位置状态
                    scrollPos: true,
                });
            }
        })

        // 批量删除
        function delAll() {
            let table = layui.table.checkStatus("goodsTable");
            //获取选中行数据
            let data = table.data;
            layer.confirm('确认要删除吗？', function () {
                $.ajax({
                    url: '/plan/goodsDelete',
                    method: 'post',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    success: function (data) {
                        layer.msg(data.msg);
                        reload();
                    },
                    error: function (data) {
                        layer.msg("网络错误");
                    }
                })
            });
        }
    </script>

</html>